


import { useEffect, useState } from 'react'
import { ParkRechargeApi, payApi } from '../api/api'
import { Input } from 'antd-mobile'
import Page from './Page'


export default function ParkPay() {

   const [list, setlist] = useState([])
   const [num, setnum] = useState('')

   // 评论页数
   const [pageNum, setPageNum] = useState(1)
   // 评论一页显示评论数量
   const [pageSize, setPageSize] = useState(10)
   // 总页数
   const [pages, setPages] = useState(1)

   const [list1, setlist1] = useState([])

   const pay = async (num: Number) => {
      const res = await payApi(num)
      console.log(res);
      setlist(res.data.data)
      getComments({pageNum, pageSize})
   }

   // const recharge = async () => {
   //    const res1 = await ParkRechargeApi()
   //    console.log(res1.data.rows);
   //    setlist1(res1.data.rows)
   // }

   // 获取评论列表
   async function getComments(params: any) {    
      const res = await ParkRechargeApi(params)
      console.log(res);
      setlist1(res.data.rows)
      setPages(Math.ceil(res.data.total / pageSize))
   }

   // 改变分页页码
   async function onChangePage(val: any) {
      getComments({
         pageNum: val,
         pageSize: 10
      })
      setPageNum(val)
   }

   useEffect(() => {
      // pay(parseInt(num))
      getComments({pageNum , pageSize})
   }, [])

   return (
      <div style={{ overflow: 'auto', height: 'calc(100vh - 100px)' }}>
         <div>
            <div>
               <h2>充值</h2>

               <Input
                  placeholder='请输入充值多少'
                  value={num}
                  onChange={val => {
                     setnum(val)
                  }}
               />

            </div>

            <div>
               <button onClick={() => {
                  pay(parseInt(num))
               }}>
                  确定充值
               </button>

               <button onClick={() => {
                  getComments({pageNum , pageSize})
               }}>
                  {/* 点击查看 */}
                  {list1.map((item: any, index) => {
                     return (
                        <div style={{ display: 'flex' }} key={item.id}>
                           最近充值金额 :
                           <div>{item.money}</div>

                           最近充值时间 :
                           <div>{item.rechargeDate}</div>

                        </div>
                     )
                  })}

               </button>
               <Page onChangePage={onChangePage} pagebtnall={pages} pagebtnnum={5} pagecur={pageNum}></Page>
            </div>
         </div>
      </div>
   )
}